<template>
  <div class="recruit-container">
    <div class="recruit-box">

      <el-button  type="primary" @click="addRecruit" style="margin-bottom:2rem">添加</el-button>

      <el-form :inline="true" :model="query" class="demo-form-inline">

        <el-form-item label="招聘岗位">
          <el-cascader
            placeholder="请选择组织"
            v-model="query.orgId"
            :options="options"
            @change="refresh">
          </el-cascader>
        </el-form-item>

        <el-form-item label="工资区间">
          <el-input  v-model="query.salary"></el-input>
        </el-form-item>

        <el-form-item label="日期区间">
        <el-date-picker
          v-model="query.dateTime"
          type="date"
          value-format="yyyy-MM-dd"
          placeholder="选择日期">
        </el-date-picker>
        </el-form-item>

        <el-form-item style="margin-left: 2rem">
          <el-button type="primary" @click="reset">重置</el-button>
        </el-form-item>
      </el-form>

      <el-table :data="page.records" stripe style="width: 100%">
        <el-table-column type="index" label="编号" min-width="5%" align="center"></el-table-column>
        <el-table-column prop="dept" label="部门" min-width="8%" align="center"></el-table-column>
        <el-table-column prop="position" label="岗位" min-width="8%" align="center"></el-table-column>
        <el-table-column prop="salaryRange" label="工资范围" min-width="10%" align="center"></el-table-column>
        <el-table-column prop="numPeople" label="招聘人数" min-width="8%" align="center"></el-table-column>
        <el-table-column prop="conditions" label="招聘条件" min-width="8%" align="center"></el-table-column>
        <el-table-column prop="jobContent" label="招聘内容" min-width="8%" align="center"></el-table-column>
        <el-table-column prop="startTime" label="起招时间" min-width="8%" align="center"></el-table-column>
        <el-table-column prop="endTime" label="结束时间" min-width="8%" align="center"></el-table-column>

        <el-table-column label="操作" min-width="15%" align="center">
          <template slot-scope="scope">
                      <el-button size="mini" @click="editRecruit(scope.row.id)">编辑</el-button>
                      <el-button size="mini" type="info" @click="fileRecruit(scope.row.id)">归档</el-button>
                      <el-button size="mini" type="danger" @click="deleteRecruit(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>

      </el-table>

      <el-pagination background layout="prev, pager, next"
                     :total="page.total" class="recruit-page"
                     :current-page="current" :page-size="page.size" @current-change="currentPage">
      </el-pagination>

    </div>
  </div>
</template>

<script>
import {RecruitSearchPage, file, del} from "@/api/recruit";
import {orgChart} from "@/api/organization";

export default {
  data(){
    return{
      current: 1,
      pageSize:10,
      page:{},
      options:[],
      orgId:[],
      query:{
        deptId:'',
        positionId:'',
        salary:'',
        dateTime:'',
        status:0
      }
    }
  },
  watch:{
    query:{
      handler(newVar){
        if(newVar.orgId instanceof Array){
          this.query.deptId = newVar.orgId[0]
          this.query.positionId = newVar.orgId[1]
        }
        this.pageRecruit()
      },
      deep:true
    }
  },
  created() {
    this.pageRecruit()
    this.selectOrg()

  },
  methods: {
    async reset(){
      this.query = {}
      this.query.status = 0
      await this.selectOrg()
      await this.pageRecruit()
    },
    async selectOrg(){
      const {data:res} =await orgChart()
      this.options = res.org.children
    },
    refresh(){
      this.$forceUpdate()
    },
    async currentPage(index){
      const {data:res} = await RecruitSearchPage(index,this.pageSize,this.query)
      this.page = res.data
    },
    async pageRecruit(){
      const {data:res} = await RecruitSearchPage(this.current,this.pageSize,this.query)
      this.page = res.data
    },
    editRecruit(id){
      this.$router.push({path:'/recruit/edit/'+id})
    },
    addRecruit(){
      this.$router.push({path:'/recruit/save'})
    },
    deleteRecruit(id){
      this.$confirm('此操作将永久删除招聘简章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        del(id).then(res => {
          this.$message({
            type: 'success',
            message: res.message
          });
          this.pageRecruit()
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    fileRecruit(id){
      this.$confirm('此操作将归档招聘简章, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
         file(id).then(res => {
           this.$message({
             type: 'success',
             message: res.message
           });
           this.pageRecruit()
         })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消归档'
        });
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.recruit{
  &-container{
    position: relative;
    width: 100%;
    height:100%;
  }
}
.recruit{
  &-box{
    margin:5% 10% 0 10%
  }
  &-page{
    padding: 20px 0 0 40%;
  }
}

</style>

<style scoped>
::v-deep .el-form-item__label {
  padding-left: 4rem;
}
</style>
